// 路由使用步骤：
// 1. npm i vue-router@3
// 2. 路由配置 ， 创建路由对象
// 3. 注册路由 main.js
// 4. 准备一个路由出口 ， router-view , 要写在 根组件的 render 对应的 组件里面

import VueRouter from "vue-router";
import Vue from 'vue'
import HomeVue from '@/views/Home.vue'
import LoginVue from '@/views/Login.vue'
// import ABC from '@/views/Abc.vue'
import store from "@/store";
import { getRoutesApi } from '@/api'

// 注册路由 - 1.全局注册router-link , router-view 这两个组件  2.把router对象 注册到 Vue.prototype 上面
Vue.use(VueRouter);

// 路由配置 - 在路由对象调用一些方法，比如push的时候，对路径path进行匹配，跳转到path对应的component
const routes = [
    { path: '/login', component: LoginVue },
];

// 路由对象 , 该对象就是我们在组件里面使用的 this.$router 全局路由对象，用来进行路由跳转之类的
const router = new VueRouter({
    routes,
    // 路由模式
    mode: "hash"
})


// 动态添加一条新的路由 - ok 的
// router.addRoute({
//     path: '/abc',
//     component: ABC
// })

// 登录也好，刷新也好，一定会跳转，只要跳转了，一定进导航守卫
router.beforeEach((to, from, next) => {

    let token = localStorage.getItem('token')

    // 如果当前已经有token，并且用户手动访问登录页
    if (token && to.path == '/login') {
        // 回到来login之前的页面
        next(from.fullPath); // fullPath 带有 过来的时候的所有的参数之类的东西
        return;
    }


    // 现在我们要把 获取 路由数据的请求放到 守卫里面来
    // 现在重新决定 路由生成的时机： 当进入页面，已经登录 - 有token ， 并且 还没有 vuex 里面的路由数据，我们就
    // 在当前这个时机发请求，获取 路由数据，并生成动态路由

    // 判断： 有token ，但是没有vuex 路由数据
    if (token && store.state.user.routes.length === 0) {
        // 此时发送请求获取路由数据
        // 获取该用户的路由
        getRoutesApi().then(res => {
            if (res.code === 200) {

                // 默认后端返回的 路由数据， 是没有首页的 ，自己添加
                // 声明一个首页数据
                // 但是我们如果直接把 首页作为一级导航，动态生成的 一级导航，无法跳转，所以我们采用的是，在 AsideNav 里面写一个固定的 首页，然后，这个地方的 下面的 home 数据， 是否需要，取决于你的 路由 里面 home 的路由是否已经写死
                const home = {
                    alwaysShow: false, // 后端反回的数据里面 ，有一个用于决定该路由数据是否显示在 左侧的属性
                    component: "Layout",
                    hidden: true,
                    meta: {
                        icon: "dashboard",
                        noCache: false,
                        title: "首页"
                    },
                    name: "Home",
                    path: "/",
                    redirect: "noRedirect"
                }

                // 把数据放到vuex
                store.commit('user/modifyRoutes', [home, ...res.data])
                // store.commit('user/modifyRoutes', res.data)  // 这行代码需要在 routes 路由配置里面有 home 的路由的时候写
                // 动态生成路由
                store.state.user.routes.forEach(parent => {
                    const route = {}
                    route.path = parent.path
                    route.component = HomeVue
                    route.meta = parent.meta // 把路由的元信息也存起来
                    if (!route.children) {
                        route.children = []
                    }
                    parent?.children?.forEach(child => {
                        route.children.push({
                            path: child.path,
                            // 子路由对应的组件，其实需要在后端配置好，然后直接返回，我们直接使用路由懒加载请求就可以
                            component: () => import(`../views/${child.component}.vue`),
                            meta: child.meta
                        })
                    })
                    // 把路由配置对象添加到 路由对象里面
                    router.addRoute(route)
                })
                // console.log(router.getRoutes())
            }
        })
    }

    // 如果 vuex里面有 路由数据了，就动态生成
    // if (store.state.user.routes.length > 0) {
    // 有路由数据了，就需要动态生成路由
    // 我们想要的路由结构，应该是 
    // { path:'父路由' , component , children : [
    //     { path: '子路由' }
    // ] }
    // 只需遍历 vuex 里面的 路由数据， 生成我们想要的结构即可
    // store.state.user.routes.forEach(parent => {
    //     const route = {}
    //     route.path = parent.path
    //     route.component = HomeVue
    //     if (!route.children) {
    //         route.children = []
    //     }
    //     parent?.children?.forEach(child => {
    //         route.children.push({
    //             path: child.path,
    //             // 子路由对应的组件，其实需要在后端配置好，然后直接返回，我们直接使用路由懒加载请求就可以
    //             component: () => import(`../views/${child.component}.vue`)
    //         })
    //     })
    //     // 把路由配置对象添加到 路由对象里面
    //     router.addRoute(route)
    // })
    // console.log(router.getRoutes())
    // 为什么无法跳转到 / ，因为 添加路由是异步，跳转也是异步，不安全
    // next('/')
    // }

    // 一定要保证有next，不然无法进入页面
    next();
})

export default router;